import XtxCheckbox from "@/components/library/xtxCheckbox";
import "./index.scss";
import { useState } from "react";
import classNames from "classnames";
function SubSort({
  sortChange,
}: {
  sortChange: (playload: {
    inventory: boolean;
    onlyDiscount: boolean;
    sortField: string | null;
    sortMethod: string | null;
  }) => void;
}) {
  const [sortParams, setSortParams] = useState<{
    inventory: boolean;
    onlyDiscount: boolean;
    sortField: string | null;
    sortMethod: string | null;
  }>({
    inventory: false,
    onlyDiscount: false,
    sortField: null,
    sortMethod: null,
  });
  const changeHasStorage = function () {
    setSortParams((pre) => {
      const updatedParams = { ...pre, inventory: !pre.inventory };
      sortChange(updatedParams); // 确保使用最新的 sortParams 调用 sortChange
      return updatedParams;
    });
  };

  const changediscount = function () {
    setSortParams((pre) => {
      const updatedParams = { ...pre, onlyDiscount: !pre.onlyDiscount };
      sortChange(updatedParams); // 确保使用最新的 sortParams 调用 sortChange
      return updatedParams;
    });
  };

  const ChangeCheck = function () {};
  // 改变排序
  const changeSort = (plyaload: string | null) => {
    let newSortParams = { ...sortParams }; // 拷贝当前的 sortParams

    if (plyaload === "price") {
      newSortParams = {
        ...newSortParams,
        sortField: plyaload,
        sortMethod:
          sortParams.sortMethod === null
            ? "desc"
            : sortParams.sortMethod === "desc"
            ? "asc"
            : "desc",
      };
    } else {
      // 如果排序字段没有改变，停止逻辑
      if (sortParams.sortField === plyaload) return;
      newSortParams = {
        ...newSortParams,
        sortField: plyaload,
        sortMethod: null, // 清除排序方法
      };
    }

    // 更新状态
    setSortParams(newSortParams);

    // 在 if-else 结束后调用 sortChange
    sortChange(newSortParams);
  };

  return (
    <div className="sub-sort">
      <div className="sort">
        <a
          className={classNames({ active: sortParams.sortField === null })}
          onClick={() => changeSort(null)}
          href="javascript:;"
        >
          默认排序
        </a>
        <a
          className={classNames({
            active: sortParams.sortField === "publishTime",
          })}
          onClick={() => changeSort("publishTime")}
          href="javascript:;"
        >
          最新商品
        </a>
        <a
          className={classNames({
            active: sortParams.sortField === "orderNum",
          })}
          onClick={() => changeSort("orderNum")}
          href="javascript:;"
        >
          最高人气
        </a>
        <a
          className={classNames({
            active: sortParams.sortField === "evaluateNum",
          })}
          onClick={() => changeSort("evaluateNum")}
          href="javascript:;"
        >
          评论最多
        </a>
        <a onClick={() => changeSort("price")} href="javascript:;">
          价格排序
          <i
            className={classNames("arrow up", {
              active:
                sortParams.sortField === "price" &&
                sortParams.sortMethod == "asc",
            })}
          />
          <i
            className={classNames("arrow down", {
              active:
                sortParams.sortField === "price" &&
                sortParams.sortMethod == "desc",
            })}
          />
        </a>
      </div>
      <div className="check">
        <XtxCheckbox
          change={ChangeCheck}
          modelValue={sortParams.inventory}
          updateModelValue={changeHasStorage}
        >
          <span>仅显示有货商品</span>
        </XtxCheckbox>
        <XtxCheckbox
          change={ChangeCheck}
          modelValue={sortParams.onlyDiscount}
          updateModelValue={changediscount}
        >
          <span>仅显示特惠商品</span>
        </XtxCheckbox>
      </div>
    </div>
  );
}
export default SubSort;
